<template>
    <view class="container">
        <!-- 顶部标题 -->
        <view class="title">
            <text>第 X 局</text> 
        </view>

        <!-- 分割线 -->
        <view class="divider"></view>

        <!-- 表格 -->
        <view class="table">
            <!-- 表头-->
            <view class="table-hand">
                <view class="table-cell">成员</view>
                <view class="table-cell">是否赢家</view>
                <view class="table-cell">得分</view>
            </view>

            <!-- 内容 -->
            <view class="table-content" v-for="(item, index) in userList" :key="index">
                <!-- 头像用户名 -->
                <view class="table-cell_userinfo">
                    <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" class="avatar"></image>
                    <text class="username">{{ item.username }}</text>
                </view>
                <!-- 单选框 -->
                <view class="table-cell_iswinner">
                    <uni-data-checkbox v-model="item.isWinner" :localdata="sex"></uni-data-checkbox>
                </view>
                <!-- 输入框 -->
                <view class="table-cell_score">
                    <input type="text" v-model="item.score" placeholder="点击输入得分" />
                </view>
            </view>
        </view>
		
		<!-- 底部功能区域 -->
		<view class="foot">
		        <button class="footbutton-left" @click="backbutton">
		            <text> 返回 </text>
		        </button>

					
		        <button class="footbutton-right" @click="confirmbutton">
					确认
				</button>
		</view>
		
    </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const userList = ref([
    { username: '用户名1', isWinner: 0, score: '' },
    { username: '用户名2', isWinner: 0, score: '' },
    { username: '用户名3', isWinner: 0, score: '' },
    { username: '用户名4很长很长很长很长很长很长很长很长很长很长很长很长', isWinner: 0, score: '' }
]);
const sex = ref([
    { text: '是', value: 0 },
    { text: '否', value: 1 }
]);



const confirmbutton = async () => {
	// 收集表单
	const tableinformation={"aaa":111}
	// 向后端发送请求
	const res = await uni.request({
	    url: 'http://172.16.24.120:5000/room/updatescore',
		method: 'POST',
		data:tableinformation
	});
	if (res.statusCode === 200) {
	    const inform = res.data;
		console.log(inform)
	} else {
	    uni.showToast({
	        title: '结算失败，请重试',
	        icon: 'none'
	    });
	}
	// 返回上级页面，并刷新上级页面
	uni.navigateBack();
		// uni.navigateTo({
		//     url: `/pages/room/roundpay`
		// });
};





// 返回按钮
const backbutton = () => {
	uni.navigateBack();
};






</script>

<style scoped>
.container {
    padding: 20px;
}

.title {
    font-size: 25px;
    text-align: center;
    margin-bottom: 25px;
    color: black;
}

.divider {
    height: 1px;
    background-color: #ccc;
    margin-bottom: 5px;
}

.table {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    color: #999999; /* 设置字体颜色为淡灰色 */
}

/* 表头 */
.table-hand {
    display: flex;
    flex-direction: row;
}
.table-cell {
    flex: 1;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 表内容 */
.table-content {
    display: flex;
    flex-direction: row;
    padding-bottom: 30px;
}
.table-cell_userinfo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}
.table-cell_iswinner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.table-cell_score {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    flex-shrink: 0; /* 防止头像被挤压 */
}

.username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* 调整单选框样式 */
.uni-data-checkbox {
    display: flex;
    justify-content: center;
    gap: 10px; /* 调整单选框之间的间隙 */
}
/* 整体底部容器样式 */
.foot {
    position: fixed;
    bottom: 20px; /* 距离底部20px，可以根据需求调整 */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* 左边按钮样式 */
.footbutton-left {
    background-color: #8b8a84;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
	transition: background-color 0.3s ease; /* 过渡效果 */
	width: 125px; 
	height: 60px; 
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 右边按钮样式 */
.footbutton-right {
    background-color: #41403b;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
	transition: background-color 0.3s ease; /* 过渡效果 */
    width: 125px; 
    height: 60px; 
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}


</style>